<template>
  <div>
    <el-dialog
      title="案件受理"
      :visible.sync="dialogVisible"
      custom-class="custom-dialog"
      width="50%"
      :before-close="handleClose"
      @opened="initData"
    >
      <div class="steps-panel of-auto" v-loading="dialogLoading">
        <div class="steps-title" />

        <div class="steps-content">
          <el-steps class="custom-steps" direction="vertical" :active="1">
            <el-step v-for="(item, index) in taskHistoryList" :key="index">
              <template slot="icon">
                <span class="status" :class="index === 0 ? 'color-1' : ''" />
              </template>
              <template slot="title">
                <div class="title">
                  {{ item.nodeName }}
                  <img
                    v-show="item.overtimeFlag === 0"
                    :src="case1"
                    class="w-60 h-15"
                    alt=""
                  />
                  <img
                    v-show="item.overtimeFlag === 1"
                    :src="case2"
                    class="w-60 h-15"
                    alt=""
                  />
                </div>
                <div class="time fs-12">{{ item.completeTime }}</div>
              </template>
              <template slot="description">
                <div class="step-content step_content_style">
                  <div class="step-content-left">
                    <div class="overFlagBox">
                      超时状态：<img
                        src="@/assets/images/images1/icon1.png"
                        alt=""
                        v-if="item.overFlag == '已超期'"
                      />
                      <img
                        src="@/assets/images/images1/icon3.png"
                        alt=""
                        v-if="item.overFlag == '未超期'"
                      />
                      <img
                        src="@/assets/images/images1/icon2.png"
                        alt=""
                        v-if="
                          item.overFlag == '即将超期' ||
                            item.overFlag == '正常办理'
                        "
                      />
                      {{ item.overFlag }}
                    </div>
                    <div>办理人：{{ item.nodeUserName }}</div>
                    <div>办理部门：{{ item.nodeDeptName }}</div>
                    <div>节点名称：{{ item.nodeName }}</div>
                    <div>办理意见：{{ item.nodeOpinion }}</div>
                  </div>
                  <!-- <div class="step-content-left">
                    <div>办理人：{{ item.nodeUserName }}</div>
                    <div>办理部门：{{ item.nodeDeptName }}</div>
                    <div>办理意见：{{ item.nodeOpinion }}</div>
                  </div> -->
                  <div class="step-content-right">
                    <img
                      :src="case4"
                      alt=""
                      @click="openImageDialog(item.attachments)"
                    />
                  </div>
                </div>
              </template>
            </el-step>
          </el-steps>
        </div>
      </div>
    </el-dialog>
    <ImageDialog
      :dialogVisible="dispatchImageDialogVisible"
      @closeDialog="dispatchImageDialogVisible = false"
      :imageDate="imageData"
    />
  </div>
</template>

<script>
import case1 from "@/assets/images/case/case1.png";
import case2 from "@/assets/images/case/case2.png";
import case3 from "@/assets/images/case/case3.png";
import case4 from "@/assets/images/case/case4.png";
import { wfmTaskHistory } from "@/api/wfm/wfm.js";
import { parseTime } from "@/utils/index";
import ImageDialog from "@/views/casedeal/components/imageDialog";
export default {
  name: "TaskHistoryDialog",
  components: { ImageDialog },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    caseCode: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      case1,
      case2,
      case3,
      case4,
      taskHistoryList: [],
      dispatchImageDialogVisible: false,
      imageData: [],
      dialogLoading: false
    };
  },
  methods: {
    parseTime,
    initData() {
      this.dialogLoading = true;
      this.getTaskHistory();
    },
    handleClose() {
      this.$emit("closeDialog");
    },
    // 查询案件流程的信息
    getTaskHistory() {
      wfmTaskHistory({ processEngine: this.caseCode })
        .then(result => {
          let { rows, code, total } = result;

          if (code == 200) {
            this.dialogLoading = false;
            this.taskHistoryList = rows;
            // console.log(rows);
            this.taskHistoryList.forEach(item => {
              // 判断超时
              if (item.endTime) {
                if (
                  Date.parse(item.planCompletionTime) < Date.parse(item.endTime)
                ) {
                  item.overFlag = "已超期";
                } else {
                  item.overFlag = "未超期";
                }
              } else {
                if (
                  Date.parse(new Date()) <=
                    Date.parse(item.planCompletionTime) &&
                  Date.parse(new Date()) + 4 * 60 * 60 * 1000 >=
                    Date.parse(item.planCompletionTime)
                ) {
                  item.overFlag = "即将超期";
                } else if (new Date() <= Date.parse(item.planCompletionTime)) {
                  item.overFlag = "正常办理";
                } else {
                  item.overFlag = "已超期";
                }
              }
            });
          }
        })
        .catch(() => {
          this.dialogLoading = false;
        });
    },
    // 图片弹框
    openImageDialog(val) {
      // this.dispatchImageDialogVisible = true;
      this.imageData = val;
    }
  }
};
</script>

<style lang="scss" scoped>
.step_content_style {
  position: relative;
}
.overFlagBox {
  line-height: 16px;
  margin-bottom: 5px;
}
.overFlagBox img {
  width: 16px;
  height: 16px;
  margin-right: 5px;
}
.step_content_style .step-content-right {
  position: absolute;
  right: -1px;
  top: -8px;
  cursor: pointer;
}
/deep/ .el-step__description {
  padding-right: 0;
}
</style>
